<template>
  <div id="login" v-loading="loading" element-loading-text="登录中...">
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;">返回</i>
      </a>
    </div>
    <h2 style="color: white;">用户登录</h2>
    <main>
      <li><input type="text" v-model="userName" placeholder="请输入账号" /></li>
      <li><input type="password" v-model="userPwd" placeholder="请输入密码" /></li>
      <li>
        <input type="text" v-model="captcha" @keyup.enter="userLogin()" placeholder="请输入验证码"/>
        <img :src="baseimg" @click="getCode()">
      </li>
      <button @click="userLogin">登录</button>
      <div class="register">还没有账号？<a @click="register" style="text-decoration: underline;">点此注册</a></div>
    </main>
  </div>
</template>

<script>
  //引入nanoid
  import {nanoid} from  'nanoid'
  export default {
  	name: "",
  	components: {
  	},
  	data() {
  		return {
        userName: "",
        userPwd: "",
        //验证码
        captcha: "",
        //唯一值
        uuid:"",
        //图片路径
        baseimg: "",
        loading: false,
        captchaEntity : {},

        execute:false
  		}
  	},

    mounted() {
      this.getCode()
    },
    methods:{
      //获取验证码
      getCode(){
        // 更新数据
        let uuid = nanoid();
        this.uuid = uuid,
        this.baseimg = `/api/CakeShop/captcha?uuid=${uuid}`
        // console.log(this.baseimg)
      },
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        this.$router.push({
          path: lastPage
        });
      },
      //登录方法
      userLogin(){
        var self = this;
        //执行验证方法
        this.loginVerify();
        if(this.execute){
            this.$http.post("/api/CakeShop/userLogin", {
							userCode: self.userName,
							userPass: self.userPwd,
              captchaEntity : {
                code: self.captcha,
                uuid: self.uuid,
              }
						})
						.then(
							function(res) {
                console.log(res)
								if (res.data.visitorInfo == null|| res.data.visitorInfo === {}) {
									self.$message({
										message: res.data.msg,
										type: "error",
										onClose: function() {
											self.loading = false;
                      self.getCode();
										},
									});
								} else {
                  console.log(res)
                  if(res.data.token != null){
                    self.$message({
                    	message: res.data.msg,
                    	type: "success",
                    	onClose: function() {
                    		self.loading = false;
                    		//跳转之前 把用户信息存储起来
                    		//cookie、session、localStorage  sessionStorage 区别？
                    		sessionStorage.setItem("visitor",JSON.stringify(res.data.visitorInfo))
                        var visitor = JSON.parse(sessionStorage.getItem("visitor"))
                    		self.$router.push({
                    			path: "/home/index"
                    		});
                    	},
                    });
                  }else{
                    self.$message({
                    	message: res.data.msg,
                    	type: "error",
                    	onClose: function() {
                    		self.loading = false;
                        self.getCode();
                    	},
                    });
                  }
								}
							},
							function(err) {}
						);
        }
      },
      //验证方法
      loginVerify(){
        var self = this;
				this.loading = true;
        if (self.userName === "" || self.userPwd === "") {
        	self.$message({
        		duration: 1500,
        		message: "用户名或密码不能为空!",
        		type: "error",
        		onClose: function() {
        			self.loading = false;
        		},
        	});
        }else if(self.captcha == ""){
          self.$message({
        		duration: 1500,
        		message: "验证码不能为空!",
        		type: "error",
        		onClose: function() {
        			self.loading = false;
        		},
        	});
        }else{
          self.execute = true;
        }
      },
      //注册方法
      register(){
          this.$router.push({
            path: "/userRegister"
          });
      }
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
  }
  .header{
    display: flex;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;

  }
  #login{
    height: 100%;
    background-image: url('../../../static/img/back.png');
    background-size: 100% 100%;
  }
  #login main{
    display: flex;
    flex-direction: column;
    /* width: 400px; */
    margin: 20px 15px 0;
    background: rgba(255,255,255,0.7);
    padding: 20px 25px;
    box-sizing: border-box;
    border-radius: 5px;
  }
  #login li{
    list-style: none;
    /* width: 100%; */
    margin:10px 0 20px;
    display: flex;
  }
  #login li input{
    width: 100%;
  	height: 35px;
  	border:1px solid #ddd;
  	border-radius: 5px;
  	padding: 0 10px;
  	box-sizing: border-box;
  }
  #login li img{
    width: 100px;
    margin-left: 35px;
    background-color: #FFFFFF;
  }
  #login button{
  	width: 100%;
  	font-weight: 600;
  	color: #FFFFFF;
  	border:0 none;
  	background: #f97487;
  	padding: 10px 0;
  	border-radius: 5px;
  }
  .register{
    margin: 10px 0;
  }
</style>
